import { createStore } from 'vuex'

/**
 * 存入localStorage
 * @param {Object} state
 */
const setLocalCartList = state => {
  const cartList = state.cartList
  const cartListString = JSON.stringify(cartList)
  localStorage.cartList = cartListString
}

/**
 * 从localStorage读取
 * @param {Object} state
 */
const getLocalCartList = () => {
  try {
    return JSON.parse(localStorage.cartList) || {}
  } catch (error) {
    return {}
  }
}

export default createStore({
  state: {
    cartList: getLocalCartList()
    // {
    // shopId: {
    //   shopName: '沃什么码',
    //   productList: {
    //     productId: {
    //       _id: '1',
    //       name: '番茄250g/份',
    //       imgUrl: '/i18n/9_16/img/tomato.png',
    //       sales: 10,
    //       price: 33.6,
    //       oldPrice: 39.6,
    //       count: 0
    //     }
    //   }
    // }
    // ================== 之前版本的结构 ==================
    // 第一层级：商铺的id
    // 第二层内容是商品内容以及购物数量
    // shopId: {
    //   productID: {
    //     _id: '1',
    //     name: '番茄250g/份',
    //     imgUrl: '/i18n/9_16/img/tomato.png',
    //     sales: 10,
    //     price: 33.6,
    //     oldPrice: 39.6,
    //     count: 0
    //   }
    // }
    // }
  },
  mutations: {
    /**
     * 加入或减少购物车数量
     * @param {Object} state state对象
     * @param {Object} payload 传入参数
     * @param {String} shopId 店铺id
     * @param {String} productId 商品id
     * @param {Object} productInfo 商品信息集
     * @param {Number} num 加入购物车的数量
     */
    changeItemToCart(state, payload) {
      const { shopId, productId, productInfo, num } = payload
      // console.log(shopId, productId, productInfo)
      const shopInfo = state.cartList[shopId] || {
        shopName: '',
        productList: {}
      }

      let product = shopInfo?.productList[productId]
      if (!product) {
        productInfo.count = 0
        product = productInfo // 初始化
      }

      product.count += num
      // && 短路运算符，前面的满足才会执行后面的逻辑，等价于if
      num > 0 && (product.checked = true)

      product.count <= 0 && (shopInfo.productList[productId].count = 0)
      // delete state.cartList[shopId]

      shopInfo.productList[productId] = product
      // 赋值
      state.cartList[shopId] = shopInfo
      setLocalCartList(state)
    },
    // 购物车勾选记录
    changeItemChecked(state, payload) {
      const { shopId, productId } = payload
      const product = state.cartList[shopId].productList[productId]
      product.checked = !product.checked
      setLocalCartList(state)
    },
    // 清除购物车
    changeCleanCartProducts(state, payload) {
      const { shopId } = payload
      state.cartList[shopId].productList = {}
      setLocalCartList(state)
    },
    // 购物车全选或者取消全选
    setCartItemsChecked(state, payload) {
      const { shopId } = payload
      const products = state.cartList[shopId].productList
      if (products) {
        for (const i in products) {
          const product = products[i]
          product.checked = true
        }
      }
      setLocalCartList(state)
    },
    /**
     * 修改商店名称
     * @param {Object} state vuex对象
     * @param {Object} payload 传值
     */
    changeShopName(state, payload) {
      const { shopId, shopName } = payload
      const shopInfo = state.cartList[shopId] || {
        shopName: '',
        productList: {}
      }
      shopInfo.shopName = shopName
      state.cartList[shopId] = shopInfo
    },
    clearCartData(state, payload) {
      const { shopId } = payload
      state.cartList[shopId].productList = {}
    }
  },
  actions: {},
  modules: {}
})
